<template>
  <div class="track" id="track"></div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  VisualMapComponent
} from 'echarts/components'
import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  Line3DChart
} from 'echarts-gl/charts'
import {
  Grid3DComponent
} from 'echarts-gl/components'

import trackData from '../kongxiang'

echarts.use(
  [TooltipComponent, VisualMapComponent, Grid3DComponent, Line3DChart, CanvasRenderer]
)
export default {
  data () {
    return {}
  },

  mounted () {
    this.paintCharts()
  },

  methods: {
    paintCharts () {
      const chartDom = document.getElementById('track')
      const myChart = echarts.init(chartDom)

      const data = this.filterData()
      const option = {
        tooltip: {},
        backgroundColor: '#fff',
        visualMap: {
          show: false,
          dimension: 2,
          min: 0,
          max: 30,
          inRange: {
            color: [
              '#313695'
              // '#4575b4',
              // '#74add1',
              // '#abd9e9',
              // '#e0f3f8',
              // '#ffffbf',
              // '#fee090',
              // '#fdae61',
              // '#f46d43',
              // '#d73027',
              // '#a50026'
            ]
          }
        },
        xAxis3D: {
          type: 'value',
          name: 'MD'
        },
        yAxis3D: {
          type: 'value',
          name: 'Right'
        },
        zAxis3D: {
          type: 'value',
          name: 'INC'
        },
        grid3D: {
          viewControl: {
            projection: 'orthographic'
          }
        },
        series: [{
          type: 'line3D',
          data: data,
          lineStyle: {
            width: 4
          }
        }]
      }
      option && myChart.setOption(option)
    },

    // 处理数据
    filterData () {
      return trackData.map(item => {
        const { MD, Right, Elev } = item
        return [MD, Right, Elev]
      })
    }
  }
}
</script>

<style scoped>
.track{
  width: 100%;
  height: 100%;
  min-width: 500px;
  min-height: 400px;
}
</style>
